<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <div class="imgWrite-top">
      <h4 style="text-align: left; color: #126bff; margin-bottom: 20px">
        角色管理
      </h4>
      <div class="top">
        <el-form
          ref="elForm"
          :model="formData"
          size="medium"
          label-width="90px"
          style="text-align: left"
          id="elForm"
        >
          <el-form-item
            label="角色名称 ："
            prop="roleXm"
            style="width: 410px; float: left; padding: 0"
          >
            <el-input
              v-model="formData.s_name"
              placeholder="请输入角色名称"
              clearable
              style="float: left; width: 280px; height: 40px"
            >
            </el-input>
          </el-form-item>
          <div style="float: left">
            <el-button @click="resetForm()" id="reset">重置</el-button>
            <el-button
              type="primary"
              @click="submitForm(formData)"
              id="submitForm"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <div class="admin-content">
      <!--  -->

      <p class="content-top">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="adddRole"
          style="border-radius: 6px"
          v-if="userInfo.personnelManagementAddManagement"
          >添加角色</el-button
        >
        <!-- v-if="!userInfo.resources.deleteTtemRole" -->
        <!--  -->
        <el-button
          v-if="userInfo.personnelManagementPlDelete"
          type="primary"
          icon="el-icon-delete-solid"
          @click="deleteTtem"
          style="
            width: 108px;
            height: 36px;
            background: #ff4444;
            border-radius: 6px;
            opacity: 1;
          "
          >批量删除</el-button
        >
      </p>
      <div class="warn-content" style="width: 100%">
        <el-table
          :data="tableData"
          style="width: 100%; border-radius: 10px"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" :selectable="selectable">
          </el-table-column>
          <el-table-column prop="ro_name" label="角色名称"> </el-table-column>
          <el-table-column prop="remark" label="描述"> </el-table-column>
          <el-table-column prop="ro_resourse" label="资源权限">
          </el-table-column>
          <el-table-column prop="ro_router" label="菜单权限"> </el-table-column>
          <el-table-column prop="ro_status" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.ro_status"
                active-color="#126BFF"
                active-text="启用"
                inactive-text="禁用"
                :disabled="scope.row.ro_name == '超级管理员'"
                :active-value="1"
                :inactive-value="0"
                @change="changeRole(scope.row)"
                v-show="!scope.row.ro_id != 1"
              >
                <!-- changeRole -->
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="ro_update" label="更新时间"> </el-table-column>
          <el-table-column label="操作" width="200">
            <!--   -->
            <template slot-scope="scope">
              <el-button
                @click="editHandleClick(scope.row)"
                v-if="userInfo.personnelManagementEdit"
                :disabled="scope.row.ro_name == '超级管理员'"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                @click="delHandleClick(scope.row)"
                v-if="userInfo.personnelManagementDelete"
                :disabled="scope.row.ro_name == '超级管理员'"
                type="text"
                size="small"
                style="color: #ff4444"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <p>'currentPage'{{ currentPage }} {{ pageSize }}</p> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total"
          style="float: right; margin-top: 20px"
        >
        </el-pagination>
      </div>
    </div>
    <div id="dialog">
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="550px"
        top="0"
        style="border-radius: 20px"
      >
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div>111</div>
        </div>
      </el-dialog>
      <!-- 添加角色 -->
      <!-- 编辑角色 -->
      <div id="addRole">
        <el-dialog
          :title="title"
          :visible.sync="addVisible"
          width="620px"
          top="0"
          style="border-radius: 20px"
          @close="close"
        >
          <div style="display: flex; flex-wrap: wrap; text-align: left">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="角色名称" prop="ro_name">
                <el-input v-model="form.ro_name"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="remark">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="ro_status">
                <el-switch
                  v-model="form.ro_status"
                  active-color="#126BFF"
                  active-text="启用"
                  inactive-text="禁用"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-form-item>
              <el-form-item label="权限配置" prop="ro_resourse">
                <el-checkbox-group v-model="numlist">
                  <el-row v-for="(m, k) in menuList" :key="k">
                    <el-col :span="12">
                      <el-checkbox
                        :label="m.me_id"
                        :value="m.me_id"
                        @change="handleCheckAllChange($event, m.me_id)"
                        >{{ m.me_name }}
                      </el-checkbox>
                      <el-row
                        v-for="(mc, key) in secMenuLIST"
                        :key="key"
                        style="margin-left: 100px"
                      >
                        <el-col :span="24" v-if="m.me_id == mc.me_father_path">
                          <el-checkbox-group
                            v-model="numlist"
                            style="font-size: 16px"
                          >
                            <el-checkbox
                              :label="mc.me_id"
                              :value="mc.me_id"
                              @change="
                                handleCheckAllChange(
                                  $event,
                                  mc.me_id,
                                  mc.me_father_path
                                )
                              "
                            >
                              {{ mc.me_name }}
                            </el-checkbox>
                          </el-checkbox-group>
                          <el-col :span="12" style="margin-left: 100px">
                            <el-row v-for="(k, key) in sourceList" :key="key">
                              <el-col :span="6" v-if="mc.me_id == k.re_menu_id">
                                <el-checkbox-group v-model="sLIST">
                                  <el-checkbox
                                    :label="k.re_id"
                                    :value="k.re_id"
                                    @change="
                                      handleCheckedCitiesChange(
                                        $event,
                                        k.re_id,
                                        k.re_menu_id
                                      )
                                    "
                                  >
                                    {{ k.re_name }}
                                  </el-checkbox>
                                </el-checkbox-group>
                              </el-col>
                            </el-row>
                          </el-col>
                        </el-col>
                      </el-row>
                      <el-col :span="12" style="margin-left: 100px">
                        <el-row v-for="(mc, key) in sourceList" :key="key">
                          <el-col :span="6" v-if="m.me_id == mc.re_menu_id">
                            <el-checkbox-group v-model="sLIST">
                              <el-checkbox
                                :label="mc.re_id"
                                :value="mc.re_name"
                                @change="
                                  handleCheckedCitiesChange(
                                    $event,
                                    mc.re_id,
                                    mc.re_menu_id
                                  )
                                "
                              >
                                {{ mc.re_name }}
                              </el-checkbox>
                            </el-checkbox-group>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <p style="text-align: right" slot="footer" class="dialog-footer">
            <el-button
              @click="handleClose"
              style="
                background-color: #e6effa;
                color: #126bff;
                margin-left: 10px;
                height: 36px;
                width: 78px;
                border-radius: 6px;
                opacity: 1;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
              "
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="onSubmit('form')"
              style="
                height: 36px;
                width: 78px;
                background-color: #126bff;
                border-radius: 6px;
                opacity: 1;
                color: #ffffff;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                margin-left: 10px;
              "
              >确定</el-button
            >
          </p>
        </el-dialog>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="deleteVisible"
        width="30%"
        top="0"
        :before-close="handleClose"
      >
        <span>你确定删除该角色吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteItem()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  addAdminRole,
  searchAdminRolePage,
  editAdminRole,
  prohibitRole,
  deleteAdminRole,
} from "@/api/role";
import { searchAdminMenuPage, searchAdminResourcePage } from "@/api/permisson";
import { searchAdminResource } from "@/api/resource";
// import { set } from "vue";
export default {
  name: "APP",
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入角色名称"));
      } else {
        callback();
      }
    };
    return {
      userInfo: null,
      treeProps: {},
      SECisIndeterminate: false,
      ONEisIndeterminate: false,
      dialogVisible: false,
      addVisible: false,
      editVisible: false,
      deleteVisible: false,
      value1: true,
      title: "添加角色",
      total: null,
      formData: {
        s_name: "",
        page: 1,
        pageSize: 10,
        // s_path: "",
      },
      // 按页数查询数据
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      form: {
        ro_name: "",
        remark: "",
        ro_status: "",
        ro_resourse: [],
        ro_router: [],
      },
      editForm: {
        ro_name: "",
        remark: "",
        ro_status: "",
        ro_resourse: [],
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      rules: {
        ro_name: [
          {
            validator: validatePass2,
            trigger: "blur",
            required: true,
          },
        ],
      },
      initSource: {
        page: 1,
        pageSize: 40,
      },
      initSources: {
        pathId: "",
      },
      list: [],
      arrP: [],
      arrS: [],
      init: {
        page: 1,
        pageSize: 10,
        s_name: "",
      },
      deleteRole: {
        ro_id: "",
      },
      menuList: [],
      secMenuLIST: [],

      sourceList: [],
      numlist: [],
      sLIST: [],
    };
  },
  watch: {
    // userInfo.user.status
  },
  created() {},
  mounted() {
    this.source();
    this.initList();
    // this.initPolice();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo")).resources;
  },
  methods: {
    handleCheckedCitiesChange(val, id, fid) {
      // let new_numlist = new Set(this.numlist);
      let new_sLIST = new Set(this.sLIST);
      // let arr = [];
      console.log(val, id, fid);
      if (val) {
        console.log("22");
        this.sLIST.push(id);
        // this.SECisIndeterminate = true;
        this.ONEisIndeterminate = false;
        this.sLIST = [...new Set(this.sLIST)];
        this.form.ro_resourse = this.arrToStr(this.sLIST);
        // arr.push[id];
      } else {
        console.log("11");
        new_sLIST.delete(id);
        // this.menuList.forEach((item) => {
        //   if (item.me_id == fid) {
        //     this.ONEisIndeterminate = true;
        //   }
        // });
        this.sLIST = [...new_sLIST];
        this.form.ro_resourse = this.arrToStr(this.sLIST);
      }
      console.log(this.sLIST);
      // console.log(this.numlist);
    },
    removeByVal(arrylist, val) {
      for (var i = 0; i < arrylist.length; i++) {
        if (arrylist[i] == val) {
          arrylist.splice(i, 1);
          break;
        }
      }
      return arrylist;
    },
    sechandleCheckAllChange(val, id) {},
    handleCheckAllChange(val, id) {
      let that = this;
      console.log(this.menuList);
      console.log(val, id);
      var son = this.menuList;
      var res = this.sourceList;
      console.log(this.menuList);
      console.log(son);
      console.log(res);
      if (val) {
        // 如果为ture 则是选中
        console.log("选中");
        this.menuList.forEach((item) => {
          // 通过遍历找到该菜单id 进行拼接
          // console.log(item);
          if (item.me_id == id) {
            this.numlist.push(id);
            if (item.children) {
              // 如果chiildren 存在 则将二级菜单拼接到菜单列表
              item.children.forEach((k) => {
                console.log(k);
                if (k.me_father_path == id) {
                  this.numlist.push(k.me_id);
                  console.log("角色管理");
                }
                if (k.children) {
                  console.log("三级");
                  this.sourceList.forEach((sour) => {
                    console.log(sour);
                    console.log(k.me_id);
                    if (sour.re_menu_id == k.me_id) {
                      console.log(sour);
                      that.sLIST.push(sour.re_id);
                    }
                    console.log(that.sLIST);
                  });
                }
              });
            } else {
              this.menuList.forEach((item) => {
                console.log(val, id);
                console.log(item.me_name);
                this.sourceList.forEach((item) => {
                  console.log(item);
                  console.log("资源id----" + item.re_id);
                  if (item.re_menu_id == id) {
                    this.sLIST.push(item.re_id);
                  }
                });
              });
            }
          } else {
            console.log("角色管理");
            if (item.children) {
              console.log("二级菜单");
              // console.log(item);
              item.children.forEach((k) => {
                console.log(k);
                this.sourceList.forEach((j) => {
                  console.log(j);
                  // console.log(j.re_menu_id +'----'+ k.me_id)
                  if (j.re_menu_id == id) {
                    console.log(j.re_name + "--" + j.re_id);
                    // console.log(k.me_id + "--" + j.re_menu_id);
                    // console.log(k);
                    console.log(j);
                    this.sLIST.push(j.re_id);
                  }
                });
              });
            }
          }
        });
      } else {
        console.log("取消选中");
        let new_numlist = new Set(this.numlist);
        let new_sLIST = new Set(this.sLIST);
        console.log(this.sLIST);
        this.menuList.forEach((item) => {
          console.log(item);
          if (!item.children) {
            if (item.me_id == id) {
              // 菜单去除
              // this.numlist.splice(this.numlist.indexOf(item.me_id), 1);
              new_numlist.delete(item.me_id);
              this.numlist = [...new_numlist];
              this.sourceList.forEach((sourceK) => {
                // 一级菜单 如果下面没有二级菜单 则直接删除对应菜单的资源
                if (sourceK.re_menu_id == id) {
                  console.log(sourceK);
                  console.log(sourceK.re_menu_id);
                  console.log(sourceK.re_id);
                  new_sLIST.delete(sourceK.re_id);
                  this.sLIST = [...new_sLIST];
                }
              });
            }
            console.log(this.sLIST);
          } else if (item.children) {
            // 如果children 存在 说明有二级菜单
            // console.log(item);
            console.log("二级菜单的炒作");
            item.children.forEach((secitem) => {
              console.log(secitem);
              if (secitem.me_father_path == id) {
                new_numlist.delete(secitem.me_id);
                this.numlist = [...new_numlist];
                this.sourceList.forEach((sourceK) => {
                  // 一级菜单 如果下面没有二级菜单 则直接删除对应菜单的资源
                  // console.log(sourceK);
                  if (sourceK.re_menu_id == secitem.me_id) {
                    console.log(sourceK);
                    new_sLIST.delete(sourceK.re_id);
                    this.sLIST = [...new_sLIST];
                  }
                });
              } else {
                this.sourceList.forEach((sourceK) => {
                  // 一级菜单 如果下面没有二级菜单 则直接删除对应菜单的资源
                  // console.log(sourceK);
                  if (sourceK.re_menu_id == id) {
                    console.log(sourceK);
                    new_sLIST.delete(sourceK.re_id);
                    this.sLIST = [...new_sLIST];
                  }
                });
              }
            });
          }
        });
      }
      let arr = [...new Set(this.sLIST)];
      this.numlist = [...new Set(this.numlist)];
      this.sLIST = arr;
      this.form.ro_resourse = this.arrToStr(this.sLIST);
      this.form.ro_router = this.arrToStr(this.numlist);
      console.log(this.sLIST);
      console.log(this.numlist);
    },
    source() {
      let arr = [];
      let a = [];
      searchAdminMenuPage(this.initSource).then((res) => {
        console.log(res.data.list);
        this.list = res.data.list;
        // this.menuList = res.data.list;
        res.data.list.forEach((item) => {
          console.log(item);
          // console.log(item.me_name);
          if (item.me_father_path == 0) {
            //
            arr.push({
              id: item.me_id,
              label: item.me_name,
              type: "menu",
              children: [],
            });
            if (item.me_father_path == 0) {
              this.menuList.push({
                me_code: item.me_code,
                me_father_path: item.me_father_path,
                me_icon: item.me_icon,
                me_id: item.me_id,
                me_name: item.me_name,
                me_router: item.me_router,
              });
            }
          } else if (
            item.me_father_path == 1 ||
            item.me_father_path == 28 ||
            item.me_father_path == 19 ||
            item.me_father_path == 24 ||
            item.me_father_path == 31
          ) {
            console.log(item);
            let arr = [];
            // console.log(arr);
            arr.forEach((items, index) => {
              // console.log(items);
              if (items.id == 1) {
                arr[index].children.push({
                  id: item.me_id,
                  label: item.me_name,
                  type: "menu",
                  children: [],
                });
              }
            });
            if (
              item.me_father_path == 1 ||
              item.me_father_path == 28 ||
              item.me_father_path == 19 ||
              item.me_father_path == 24 ||
              item.me_father_path == 31
            ) {
              console.log(item);
              a.push({
                me_code: item.me_code,
                me_father_path: item.me_father_path,
                me_icon: item.me_icon,
                me_id: item.me_id,
                me_name: item.me_name,
                me_router: item.me_router,
              });
              this.secMenuLIST = a;
            }
          }
          console.log(this.menuList);
          setTimeout(() => {
            console.log(a);
          }, 50);
          console.log(this.secMenuLIST);
          this.menuList.forEach((item) => {
            if (item.children) {
              item.children = this.secMenuLIST;
            }
          });
          console.log(this.menuList);
        });
        // 搜索角色资源
        searchAdminResource(this.initSources).then((res) => {
          console.log(res);
          this.sourceList = res.data;
          let arr = [];
          console.log(this.sourceList);
          for (const key in res.data) {
            // console.log(res.data[key]);
            res.data[key].forEach((item) => {
              console.log(item);
              arr.push(item);
            });
          }
          this.sourceList = arr;
        });
      });
    },
    initList() {
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      searchAdminRolePage(this.formData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          loadingInstance.close();
          res.data.list.forEach((item) => {
            this.$moment;
            item.ro_update = this.$moment(item.ro_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.tableData = res.data.list;
          this.total = res.data.count;
        }
      });
    },
    submitForm(data) {
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      searchAdminRolePage(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          loadingInstance.close();
          res.data.list.forEach((item) => {
            this.$moment;
            item.ro_update = this.$moment(item.ro_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.tableData = res.data.list;
          this.total = res.data.count;
        }
      });
    },
    resetForm() {
      this.$refs.elForm.resetFields();
      // this.$nextTick(() => {
      this.formData.s_name = "";
      this.currentPage = 1;
      this.pageSize = 10;
      this.formData.pageSize = 10;
      this.formData.page = 1;
      console.log(this.formData);
      this.initList();
      // });
    },
    handleCheckChange(data, checked, indeterminate) {
      let res = this.$refs.tree.getCheckedNodes(data);
      let res1 = this.$refs.tree.getNode(data);
      console.log(data.label);
      console.log(checked);
      console.log(indeterminate);
      this.filterID(data, checked, res1);
    },
    // 递归遍历
    filterID(data, checked, indeterminate) {
      console.log(checked);
      let menuLIst = [];
      let res = this.$refs.tree.getCheckedNodes(data, true);
      let res1 = this.$refs.tree.getNode(data);
      console.log(res);
      let childrenNode = this.$refs.tree.getCheckedKeys(true); // 选中的子节点
      let checkedNode = this.$refs.tree.getCheckedKeys();
      // this.form.ro_resourse = this.$refs.tree.getCheckedKeys(true);
      for (let i = 0; i < childrenNode.length; i++) {
        const element = childrenNode[i];
        const index = checkedNode.indexOf(element);
        if (index !== -1) {
          checkedNode.splice(index, 1);
        }
      }
      // const mergedArray = array1.concat(array2); 506 520
      menuLIst = checkedNode.concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(childrenNode); // 子节点集合
      // console.log(checkedNode); // 父节点结合
      console.log(menuLIst); // 字节点结合
      this.form.ro_resourse = this.arrToStr(
        this.$refs.tree.getCheckedKeys(true)
      );
      // this.form.ro_router = ro_router; // 父节点
      this.form.ro_router = this.arrToStr(menuLIst); //父节点
    },
    // 数组拼接
    arrToStr(data) {
      let str = "";
      data.forEach((item) => {
        str += item + ",";
      });
      return (str = str.slice(0, str.length - 1));
    },
    // 数组删除
    filters(data, res) {
      var new_set = new Set(data);
      new_set.delete(res.parent.data.id);
      return [...new_set];
    },
    // =============

    // ===========
    // 处理资源格式
    handleSoruce(data) {
      if (data.length > 0) {
        console.log(data);
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.formData.pageSize = val;
      this.formData.page = 1;
      console.log(this.formData);
      this.pageSize = val;
      this.initList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.formData.page = val;
      // this.init.pageSize = 10;
      this.initList();
    },
    //编辑弹窗
    editHandleClick(row) {
      let arr = [];
      let arr1 = [];
      console.log(row);
      this.addVisible = !this.addVisible;
      this.form.ro_id = row.ro_id;
      this.form.remark = row.remark;
      this.form.ro_name = row.ro_name;
      this.form.ro_status = row.ro_status;
      this.title = "编辑角色";
      console.log(row.ro_router.split(","));
      console.log(row.ro_resourse.split(",").splice(0, 1));
      row.ro_router.split(",").forEach((item) => {
        arr.push(parseInt(item));
        // item = ;
      });
      row.ro_resourse.split(",").forEach((item) => {
        console.log(item);
        if (item != "NaN") {
          //
          arr1.push(parseInt(item));
        }
        // item = ;
      });
      console.log(arr);
      console.log(arr1);
      this.$nextTick(() => {
        this.numlist = arr;
        this.sLIST = arr1;
      });
    },

    // 取消
    handleClose() {
      this.$refs["form"].resetFields();
      this.addVisible = !this.addVisible;
      this.form.ro_name = "";
      this.form.remark = "";
      this.form.status = false;
      this.numlist = [];
      this.sLIST = [];
    },
    close() {
      console.log("111");
      this.$refs["form"].resetFields();
      this.addVisible = false;
      this.form.ro_name = "";
      this.form.remark = "";
      this.form.status = false;
      this.numlist = [];
      this.sLIST = [];
    },
    // 重置表单
    resetAddForm() {
      this.$refs["form"].resetFields();
      this.addVisible = false;
    },
    // 添加角色
    adddRole() {
      this.title = "添加角色";
      this.addVisible = !this.addVisible;
    },
    onSubmit(form) {
      console.log(form);
      if (this.title == "添加角色") {
        this.$refs[form].validate((valid) => {
          if (valid) {
            console.log(this.form);
            this.addVisible = false;
            addAdminRole(this.form).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  showClose: false,
                  message: res.message,
                  type: "success",
                });
                this.initList();
                // loadingInstance.close();
                this.$nextTick(() => {
                  // this.$refs.tree.setCheckedKeys([]);
                  this.$refs["form"].resetFields();
                });
              } else {
                this.$message({
                  showClose: false,
                  message: res.message,
                  type: "warn",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        console.log("编辑");
        console.log(this.form);
        this.addVisible = !this.addVisible;
        editAdminRole(this.form).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.initList();
            this.resetAddForm();
          }
          this.$refs["form"].resetFields();
          // this.$refs.tree.setCheckedKeys([]);
          // this.tableData = res.data.list;
          // loadingInstance.close();
        });
      }
    },
    // 删除
    delHandleClick(row) {
      console.log(row);
      console.log(row.ro_id);
      this.deleteRole.ro_id = row.ro_id;
      // delDepartment
      this.deleteVisible = true;
    },
    // 单选删除
    deleteItem() {
      console.log("confirm");
      this.deleteVisible = false;
      deleteAdminRole(this.deleteRole).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
          this.initList();
        } else {
          this.$message({
            showClose: false,
            message: res.message,
            type: "warn",
          });
        }
      });
    },
    // 批量删除
    deleteTtem() {
      let ywlsh = "";
      console.log(this.deleteCheckedArr);
      this.deleteCheckedArr.forEach((item) => {
        console.log(item);
        console.log(item.ro_id);
        ywlsh += "" + item.ro_id + "," + "";
      });
      deleteAdminRole({ ro_id: ywlsh }).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
          this.initList();
        } else {
          this.$message({
            showClose: false,
            message: res.message,
            type: "warn",
          });
        }
      });
    },
    // 状态
    changeRole(row) {
      // console.log(row);
      let data = {
        ro_status: row.ro_status,
        ro_id: row.ro_id,
      };
      // console.log(row.ro_id);
      // console.log(row.ro_status);
      // console.log(data);
      prohibitRole(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
        }
      });
    },

    // 多选
    handleSelectionChange(val) {
      this.deleteCheckedArr = val;
      // this.deleteCheckedArr.shift(); //将超级管理员从删除数组中移出
      console.log(this.deleteCheckedArr);
      // this.tableData[0].disabled = true;
    },
    selectable(row) {
      return row.ro_id != 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.imgWrite-top {
  //
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: 120px;
  // display: flex;
  // flex-direction: column;
  // flex-wrap: nowrap;
  // align-content: center;
  // align-items: flex-start;
  box-sizing: border-box;
}
.imgWrite-top {
  width: calc(100%);
}
/deep/.el-input--medium .el-input__inner {
  height: 40px;
  line-height: 40px;
}
/deep/.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
  border-radius: 6px !important;
}
.top {
  .el-form {
    /deep/.el-form-item__label {
      width: 90px !important;
      text-align: left;
    }
  }
}
.admin-content {
  // overflow: hidden;
  margin-top: 20px;
  height: auto !important;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  flex: 1;
}
.admin-content > p:nth-of-type(1) {
  // border: 1px red solid;
  height: 40px;
  line-height: 40px;
  text-align: left;
  margin-bottom: 10px;
}
.content-top .el-button {
  width: 108px;
  height: 36px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: none;
}

/deep/.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px;
  height: 21px;
  font-size: 16px;
  color: #13213b;
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
/deep/.el-dialog__header {
  text-align: left;
  width: 80px;
  height: 26px;
  font-size: 20px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-dialog {
  width: 894px;
  height: auto;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
}
#addRole {
  position: relative;
}
// #addRole /deep/.el-dialog {
//   // /deep/.el-dialog__wrapper {
//   //   /deep/.el-dialog {
//   //     color: red;
//   height: 720px;
//   // overflow: auto;
//   border-radius: 20px;
//   position: absolute;
//   left: 50%;
//   right: 50%;
//   transform: translate(-50%, -50%);

//   // }
//   // }
// }
::v-deep.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px !important;
  height: 21px !important;
  font-size: 16px !important;
  color: #13213b !important;
}
</style>
